<template>
  <div id="home" ref="home">
    <el-carousel :interval="3000" arrow="always" :height="'450px'" v-if="true||carouse.length!==0">
      <el-carousel-item v-for="(item,index) in carouse" :key="index">
        <a :href="item.href" target="_blank"><img style="width: 100% ;height: 100%" :src="item.imgUrl" alt=""></a>
        <!--<h3>{{ item.name }}</h3>-->
        <!--<h3>item</h3>-->
      </el-carousel-item>
    </el-carousel>
    <div class="main_container">
      <aside class="left_content" :class="{'a':fixed}">
        <NavCard/>
      </aside>
      <div class="cardlist">
        <Post class="card" @success="getC"/>
        <article class="card" v-for="item in moments">
          <Momment :moment="item"/>
          <MommentOption :id="item.id" :item="item"
                         @Collection="Collect"
                         @Repost="Repost"
                         @Comment=""
                         @Like="Like"
          />
        </article>
      </div>
      <aside class="right_content">
        <Clock :class="{'a2':fixed}"/>
      </aside>
    </div>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment,quotes,semi,comma-spacing */

  import Momment from '@/components/post/moment'
  import MommentOption from '@/components/post/moment-option'
  import TabCard from '@/components/smallComponents/tabcard'
  import NavCard from '@/components/smallComponents/navcard'
  import Post from '@/components/smallComponents/post'
  import Clock from '@/components/clock'
  //  import Comment from '@/components/smallComponents/comment'
  import { getAllPost, GetCarousel } from '@/public/api'
  import Bus from '../../bus/bus'

  export default {
    components: {Momment, MommentOption, TabCard, NavCard, Post, Clock},
    data () {
      return {
        hello: '这是首页',
        currentPage: '',
        size: 7,
        hasMore: true,
        fixed: '',
        moments: [],
        carouse: []
      }
    },
    methods: {
      Collect (id) {
        console.log(`父组件接受的Collect${id}`)
      },
      Repost (id) {
        console.log(`父组件接受的Repost${id}`)
      },
      Comment (id) {
        console.log(`父组件接受的Comment${id}`)
      },
      Like (id) {
        console.log(`父组件接受的Like${id}`)
      },
      getC () {
        this.moments.length = 0
        this.getContent()
      },
      getContent (isLoadMore = false, page = 1) {
        getAllPost({
          page: page,
          size: this.size
        }).then(data => {
          if (data.status) {
            let arr = data.data
            if (isLoadMore || page === 1) this.moments.length = 0
            for (let i = 0; i < arr.length; i++) {
              this.moments.push({
                id: arr[i].id,
                content: arr[i].content,
                update_time: arr[i].created_at,
                user_id: arr[i].user_id,
                group_id: arr[i].group_id,
                group_name: arr[i].group_name || '默认',
                name: arr[i].userbasic.name,
                avatar: arr[i].userbasic.avatar,
                Images: arr[i].images,
                vote: arr[i].vote.some((item, index, array) => {
                  return item.user_id + '' === this.User_id
                }),
                collect: arr[i].collect.some((item, index, array) => {
                  return item.user_id + '' === this.User_id
                }),
                collect_size: arr[i].collect.length,
                vote_size: arr[i].vote.length,
                comment_visible: false
              })
            }
            console.log(1111111111111111, this.moments)
            this.currentPage = data.page
            this.hasMore = data.hasMore
          }
        }).catch(message => {
          console.log(message)
        })
      },
      lodeMore () {
        if (!this.hasMore) {
          console.log('没有啦')
        } else {
          console.log('加载更多页面')
          this.currentPage++
          this.getContent(false, this.currentPage)
        }
      },
      getCarousel () {
        GetCarousel().then(
          data => {
            if (data.status) {
              this.carouse = (data.data).sort((a, b) => {
                return a.order - b.order
              })
            }
          }
        ).catch()
      }
    },
    mounted () {
      console.log('初始化加载信息')
      this.getCarousel()
      this.getContent()
      Bus.$on('loadMore', () => {
        console.log('首页加载更多')
        this.lodeMore()
      })
      Bus.$on('toFix', (current) => {
        this.fixed = current
      })
    },

    beforeDestroy () {
      Bus.$off('loadMore')
      Bus.$off(' toFix')
    },

    watch: {
      User_id (curVal, oldVal) {
        this.getContent()
      }
    },

    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }

  }
</script>
<style scoped>
  #home {
    /*background: palegoldenrod;*/
    height: 100%;
    text-align: left;
  }

  .main_container {
    overflow: hidden;
  }

  .main_container > aside, .main_container > div {
    float: left;
  }

  .main_container > aside {
    width: 230px;
    /*background: pink;*/
    margin-left: 1em;
  }

  .main_container > div {
    margin-top: 2em;
    margin-left: 280px;
    /*background: red;*/
  }

  @media screen and (max-width: 1155px) {
    .right_content {
      display: none;
    }
  }

  .right_item {
    margin-bottom: 2em;
  }

  .left_content {
    /*background: rgba(255, 255, 255, 0.37);*/
    margin-top: 2em;
    margin-left: 2em;
    width: 230px;
    position: absolute;
  }

  .a {
    position: fixed;
    top: 0px;
  }

  .a2 {
    position: fixed;
    top: 34px;
  }

  .right_content {
    margin-top: 2em;
  }

  .main_container .card {
    margin-bottom: 1em;
    width: 600px;
    box-sizing: border-box;
    background: white;
  }

  .main_container .card:hover {
    box-shadow: 0 0 0 1px black;
    transform: none;
  }
</style>
